<template>
    <div>
        <el-form ref="formRef" label-width="auto">
            <el-form-item label="SPU明细">
                <el-input placeholder="请输入SPU名称" />
            </el-form-item>
            <el-form-item label="SPU品牌" prop="name">
                <el-select>
                    <el-option label="华为" value="1" />
                    <el-option label="OPPO" value="2" />
                    <el-option label="小米" value="3" />
                </el-select>
            </el-form-item>

            <el-form-item label="SPU描述">
                <el-input type="textarea" placeholder="请输入SPU描述" />
            </el-form-item>

            <el-form-item label="SPU照片">
                <el-upload action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    list-type="picture-card">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>

                <el-dialog>
                    <img w-full alt="Preview Image" />
                </el-dialog>
            </el-form-item>

            <el-form-item label="SPU销售属性">
                <el-select style="width: 200px;">
                    <el-option label="华为" value="1" />
                    <el-option label="OPPO" value="2" />
                    <el-option label="小米" value="3" />
                </el-select>

                <el-button type="primary" size="default" icon="Plus" style="margin: 0px 10px;">添加属性值</el-button>

                <!-- table -->
                <el-table border style="margin: 10px 0px;">
                    <el-table-column label="序号" type="index" align="center" width="80px" />
                    <el-table-column prop="name" label="属性名" width="180" />
                    <el-table-column prop="name" label="属性值" />
                    <el-table-column label="操作" width="180px" />
                </el-table>

                <el-button type='primary'>保存</el-button>
                <el-button @click="cancel">取消</el-button>

            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang='ts' name='SpuForm'>
let $emit = defineEmits(['changeScene']);

const cancel = () => {
    $emit('changeScene', 0);
};

</script>

<style scoped lang='scss'></style>